<template>
  <div id="app">
    <div class="container" :style="customerProperty">
      <div class="check">
        <img
          :src="require(`@/assets/line-top.png`)"
          width="30px"
          :height="`${checkImgHeight}px`"
          alt=""
        />
        <div class="vertical-line"></div>
        <img
          :src="require(`@/assets/line-bottom.png`)"
          width="30px"
          :height="`${checkImgHeight}px`"
          alt=""
        />

        <img
          :src="require(`@/assets/open.png`)"
          width="30px"
          :height="`${checkImgHeight}px`"
          style="margin-top: 10px"
          alt=""
        />
        <div
          style="color: white; white-space: nowrap"
          :style="{
            height: `${checkImgHeight}px`,
          }"
        >
          开启中
        </div>
      </div>
      <div class="mask-left"></div>
      <div class="mask-right"></div>
      <div class="wrap">
        <div
          class="list-group-wrap"
          :class="{ roll_animation: rollState == 'start' }"
          :style="{
            transform: `translateX(${translateX}px)`,
            'transition-duration': duration + 'ms',
          }"
        >
          <div
            v-for="(item, index) in shaftList"
            :key="index"
            :style="{
              background: item.color,
            }"
            class="list-group-item"
          >
            <img
              :src="require(`@/assets/${item.index}.jpg`)"
              width="100%"
              height="100%"
              alt=""
            />
          </div>
          <!-- <div class="list-group-wrap"></div> -->
        </div>
      </div>
      <div style="margin-left: 65px; margin-top: 200px">
        <button @click="roll({ index: 1 })">1</button>
        <button @click="roll({ index: 4 })">4</button>
        <button @click="roll({ index: 5 })">5</button>
        <button @click="roll({ index: 6 })">6</button>
        <button @click="roll({ index: 7 })">7</button>
        <button @click="roll({ index: 8 })">8</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    customerProperty() {
      return {
        "--showItemLen": this.showItemLen,
        "--leftLen": this.leftLen,
        "--itemWidth": this.itemWidth,
        "--itemHeight": this.itemHeight,
        "--gap": this.gap,

        "--check-width": this.checkWidth, //线 宽度

        "--check-height":
          this.boxPaddingTop * 2 +
          this.itemHeight +
          this.checkImgHeight * 3 +
          10, // 总高度

        "--check-left":
          (this.defaultNum - 0.5) * (this.itemWidth + this.gap) -
          this.checkWidth / 2,
        "--check-img-height": this.checkImgHeight,

        "--container-width": this.showItemLen * (this.itemWidth + this.gap), // 总宽度
        "--container-height": this.boxPaddingTop * 2 + this.itemHeight, // 总高度

        "--boxPaddingTop": this.boxPaddingTop,

        "--left-width": this.leftLen * (this.itemWidth + this.gap), // 左边位移
      };
    },
  },
  data() {
    return {
      showItemLen: 9, // 应该为奇数
      leftLen: 0,
      itemWidth: 200,
      itemHeight: 200,
      gap: 0,
      defaultNum: 5, //第一次加载时

      checkWidth: 20, // 线宽度

      boxPaddingTop: 60, //顶部距离
      checkImgHeight: 30, //线图片高度

      translateXRandom: 0,
      random: 0,
      amend: 30,

      prizeList: [
        { index: 1, color: "red" },
        { index: 2, color: "orange" },
        { index: 3, color: "yellow" },
        { index: 4, color: "green" },
        { index: 5, color: "blue" },
        { index: 6, color: "indigo" },
        { index: 7, color: "violet" },
        { index: 8, color: "pink" },
      ],
      // 位置
      translateX: 0,
      // 摇奖状态
      rollState: "stop",
      // 总的摇奖时间 单位毫秒
      duration: 14000,
      // 滚动列表
      shaftList: [],
      selfWidth: 0,
    };
  },
  mounted() {
    this.init({
      duration: 3000,
    });
    this.$nextTick(() => {
      this.selfWidth = this.itemWidth;
      // let element = document.querySelector(".list-group-item");
      // let computedStyle = window.getComputedStyle(element);
      // this.selfWidth =
      //   Number(computedStyle.width.replace("px", "")) +
      //   Number(computedStyle.marginRight.replace("px", ""));
      // console.log(
      //   Number(computedStyle.width.replace("px", "")) +
      //     Number(computedStyle.marginRight.replace("px", ""))
      // );
    });
  },
  methods: {
    // 初始化
    init({ duration = 3500 }) {
      // 最低4秒
      if (duration < 4000) {
        duration = 4000;
      }
      this.shaftList = [];
      this.shaftList = this.shuffle(this.prizeList, 9);
      this.$nextTick(function () {
        this.duration = duration;
      });
    },
    // 拷贝们的数组，方遍横项滚动
    shuffle(arr, num) {
      let tmpShaft = [];
      while (num > 0) {
        tmpShaft.push(...arr);
        num--;
      }
      return tmpShaft;
    },
    getRandomNumber(min, max) {
      // 确保 min 和 max 是数字
      min = Math.ceil(min);
      max = Math.floor(max);

      // 生成 min 和 max 之间的随机数
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    // 设定位置
    setTranslateX(index) {
      const groupPrizeLength = this.prizeList.length;
      // 倒序遍历奖品列表，找出开奖结果的最靠后的下标
      for (let k = this.shaftList.length - 1 - groupPrizeLength; k >= 0; k--) {
        console.log(
          this.shaftList[k].index == index,
          this.shaftList[k].index,
          index,
          k
        );
        if (this.shaftList[k].index == index) {
          const r = this.selfWidth / 2 - this.amend;
          const max = r;
          const min = -r;
          this.random = this.getRandomNumber(min, max);
          // 延迟滚动
          this.translateX = -(
            (k - (this.defaultNum - 1)) * this.selfWidth +
            this.random
          );
          break;
        }
      }
    },
    // 摇奖
    roll({ index }) {
      if (this.rollState == "start") {
        return console.warn("正在抽奖哦！");
      }
      this.rollState = "start";
      // 滚动到指定位置
      this.setTranslateX(index);
      setTimeout(() => {
        this.stop(index);
      }, this.duration + 1000);
    },
    stop(index) {
      this.rollState = "stop";
      this.$nextTick(function () {
        // 停止滚动之后，位移到第二组奖品列表的对应位置，为下一次摇奖留下滚动空间，实现多次摇奖无缝滚动效果
        this.translateX = -(
          (this.prizeList.length + (index - this.defaultNum)) * this.selfWidth +
          this.random
        );

        console.log(`抽中了第${index}个`);
      });
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.mask-left {
  position: absolute;
  left: 0;
  top: calc(var(--boxPaddingTop) * 1px);
  width: calc(var(--itemWidth) * 0.8 * 1px); /* 遮罩层的宽度 */
  height: calc(var(--itemHeight) * 1px);
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0) 0%,
    /* 从右到左，完全不透明 */ rgba(0, 0, 0, 1) 100% /* 到左端完全透明 */
  );
  z-index: 10;
}

.mask-right {
  position: absolute;
  left: calc(
    (var(--container-width) - var(--itemWidth) + var(--itemWidth) * 0.2) * 1px
  );
  top: calc(var(--boxPaddingTop) * 1px);
  width: calc(var(--itemWidth) * 0.8 * 1px); /* 遮罩层的宽度 */
  height: calc(var(--itemHeight) * 1px);
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  z-index: 10;
}

.container {
  padding: calc(var(--check-img-height) / 2 * -1px) 0;
  position: relative;
  /* background: #0e101b; */
}

.wrap {
  position: relative;
  width: calc(var(--container-width) * 1px);
  height: calc(var(--container-height) * 1px);
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  /* transform: scale(2); */

  padding: calc(var(--boxPaddingTop) * 1px) 0;
}

.check {
  position: absolute;
  left: calc(var(--check-left) * 1px);
  /* right: 50%; */
  top: calc(var(--check-img-height) / 2 * -1px);
  width: calc(var(--check-width) * 1px);
  height: calc(var(--check-height) * 1px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vertical-line {
  flex: 1;
  width: 3px; /* 竖线的宽度 */
  background: linear-gradient(
    to bottom,
    rgba(136, 143, 110, 0) 0%,
    /* 顶部开始透明 */ #888f6e 30px,
    /* 从30px开始颜色不变 */ #888f6e calc(100% - 30px),
    /* 到倒数30px颜色不变 */ rgba(136, 143, 110, 0) 100% /* 底部结束透明 */
  );
}

.list-group-wrap {
  /* position: absolute; */
  width: 63000px;
  /* display: flex */
  /* align-items: center; */
  /* position: absolute; */
  /* width: 2400px; */
  margin-left: calc((var(--left-width) * -1px));

  transition-property: none;
  transition-duration: 0s;
  padding: calc((var(--gap) / 2) * 1px);

  position: relative;
}

.list-group-item {
  display: inline-block;
  width: calc(var(--itemWidth) * 1px);
  height: calc(var(--itemHeight) * 1px);
  margin-right: calc(var(--gap) * 1px);
}

.item_actived {
  border: 3px dashed #c5821c;
}

.roll_animation {
  transition-property: transform;
  transition-timing-function: cubic-bezier(1, 0.1, 0.1, 1);
}
</style>

<style>
html,
body,
#app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#app {
  background: #0e101b;
  padding: 30px;
}
</style>